workspace: Only reveal title captions on hover

While the new title position gives the previews more space, they now
overlay the content which may hide valuable information. Address this
by only revealing the title as additional information on hover, like
we do for other auxiliary elements.

https://bugzilla.gnome.org/show_bug.cgi?id=783953

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index e43b9c093721d9b7c2d15981219958ae584df246..442a7f379ee8739c7fbde407941af3d4ad1209df 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -1107,13 +1107,10 @@ StScrollBar {
 
 .window-caption {
   spacing: 25px;
-  color: #eeeeec;
-  background-color: rgba(46, 52, 54, 0.7);
+  color: #ffffff;
+  background-color: #215d9c;
   border-radius: 8px;
   padding: 4px 12px; }
-  .window-caption:hover {
-    background-color: #215d9c;
-    color: #ffffff; }
 
 .search-entry {
   width: 320px;

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index b178ba1d9d090e269b898952fd5a79c54ddc6f75..3ce23ca9648c131a33b79f37b3e19001ff45450d 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit b178ba1d9d090e269b898952fd5a79c54ddc6f75
+Subproject commit 3ce23ca9648c131a33b79f37b3e19001ff45450d

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c57fae7115797d74ed803603cec33ff7b084761e..3c753bfc3b77d0d7c8b57b57330a7942155e4605 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1107,13 +1107,10 @@ StScrollBar {
 
 .window-caption {
   spacing: 25px;
-  color: #eeeeec;
-  background-color: rgba(46, 52, 54, 0.7);
+  color: #ffffff;
+  background-color: #215d9c;
   border-radius: 8px;
   padding: 4px 12px; }
-  .window-caption:hover {
-    background-color: #215d9c;
-    color: #ffffff; }
 
 .search-entry {
   width: 320px;

diff --git a/js/ui/workspace.js b/js/ui/workspace.js
index a1b565b78b1ba87c36957c037645738600515bd8..7399a6e1c1c9bafcf1413a880019b4d00e33677a 100644 (file)
--- a/js/ui/workspace.js
+++ b/js/ui/workspace.js
@@ -466,6 +466,7 @@ var WindowOverlay = new Lang.Class({
         this._windowAddedId = 0;
 
         button.hide();
+        title.hide();
 
         this.title = title;
         this.closeButton = button;
@@ -490,7 +491,6 @@ var WindowOverlay = new Lang.Class({
 
     hide: function() {
         this._hidden = true;
-        this.title.hide();
 
         this.hideCloseButton();
     },
@@ -498,7 +498,6 @@ var WindowOverlay = new Lang.Class({
     show: function() {
         this._hidden = false;
 
-        this.title.show();
         if (this._windowClone.actor['has-pointer'])
             this._animateVisible();
     },
@@ -639,39 +638,28 @@ var WindowOverlay = new Lang.Class({
     _animateVisible: function() {
         this._parentActor.raise_top();
 
-        if (this._windowCanClose()) {
-            this.closeButton.show();
-            this.closeButton.opacity = 0;
-            Tweener.addTween(this.closeButton,
+        let toAnimate = [this.border, this.title];
+        if (this._windowCanClose())
+            toAnimate.push(this.closeButton);
+
+        toAnimate.forEach(a => {
+            a.show();
+            a.opacity = 0;
+            Tweener.addTween(a,
                              { opacity: 255,
                                time: CLOSE_BUTTON_FADE_TIME,
                                transition: 'easeOutQuad' });
-        }
-
-        this.border.show();
-        this.border.opacity = 0;
-        Tweener.addTween(this.border,
-                         { opacity: 255,
-                           time: CLOSE_BUTTON_FADE_TIME,
-                           transition: 'easeOutQuad' });
-
-        this.title.add_style_pseudo_class('hover');
+        });
     },
 
     _animateInvisible: function() {
-        this.closeButton.opacity = 255;
-        Tweener.addTween(this.closeButton,
-                         { opacity: 0,
-                           time: CLOSE_BUTTON_FADE_TIME,
-                           transition: 'easeInQuad' });
-
-        this.border.opacity = 255;
-        Tweener.addTween(this.border,
-                         { opacity: 0,
-                           time: CLOSE_BUTTON_FADE_TIME,
-                           transition: 'easeInQuad' });
-
-        this.title.remove_style_pseudo_class('hover');
+        [this.closeButton, this.border, this.title].forEach(a => {
+            a.opacity = 255;
+            Tweener.addTween(a,
+                             { opacity: 0,
+                               time: CLOSE_BUTTON_FADE_TIME,
+                               transition: 'easeInQuad' });
+        });
     },
 
     _onEnter: function() {
@@ -712,7 +700,7 @@ var WindowOverlay = new Lang.Class({
         }
         this.closeButton.hide();
         this.border.hide();
-        this.title.remove_style_pseudo_class('hover');
+        this.title.hide();
     },
 
     _onStyleChanged: function() {